<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>认识MVVM</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				MVVM模型：
						1. M：模型(Model) ：对应data中的数据
						2. V：视图(View) ：模板
						3. VM：视图模型(ViewModel) ： Vue实例对象
				观察发现：
						1.vm身上有很多$开头的属性或方法，这些属性或方法一般都是给我们程序员用的（也不都用）。
						2.data中配置的属性，也知道咋的了，反正最后都出现在了vm身上。
						3.vm身上所有的属性，以及Vue.prototype中的属性，在模板中都可以直接使用。
		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<h1>学校名称：{{name}}</h1>
			<h1>学校地址：{{address}}</h1>
			<h1>测试1：{{$options}}</h1>
			<h1>测试2：{{_isMounted}}</h1>
			<h1>测试3：{{_c}}</h1>
			<h1>测试4：{{$emit}}</h1>
			<h1>测试5：{{a}}</h1>
			<h1 :a="a">你好1</h1>
			<h1 :a="$emit">你好2</h1>
		</div>
	</body>

	<script type="text/javascript">
		//阻止 vue 在启动时生成生产提示。
		Vue.config.productionTip = false
		//往Vue的原型对象上追加了一个a属性，值为99
		Vue.prototype.a = 99
		const vm = new Vue({
			el:'#demo',
			data:{
				name:'尚硅谷',
				address:'宏福科技园'
			}
		})
		
		console.log(vm)
		
	</script>
</html>